<template>
	<view class="page-index-list" :style="{ '--custombar-height': vuex_custom_bar_height + 'px' }">
		<!-- 顶部自定义导航 -->
		<!-- 顶部自定义导航 -->
		<tn-nav-bar backgroundColor="#5677fc" :isBack="false" :bottomShadow="false" fontColor="#FFFFFF">{{ title
		}}</tn-nav-bar>
		<view :style="{ height: vuex_custom_bar_height + 'px' }"></view>

		<view class="template-course tn-safe-area-inset-bottom" style="margin-bottom: 200rpx;">

			<!-- 科目选择 -->
			<!-- <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-padding-sm">
				<view class="justify-content-item tn-text-xl" @click="goPage('/pagesSubject/index?type=subject')">
					<text class="tn-text-bold tn-text-lg">{{ subjectName }}</text>
					<text class="tn-icon-sequence tn-margin-left-sm"></text>
				</view>
				<view class="justify-content-item tn-text-xl" @click="goPage('/pages/search/index')">
					<text class="tn-icon-search"></text>
				</view>
			</view> -->

			<!-- 轮播图 -->
			<view class="banner-container" v-if="banners.length">
				<tn-swiper :list="banners" :height="300" :effect3d="false" mode="dot"></tn-swiper>
			</view>

			<!-- 公告栏 -->
			<view class="notice-container" v-if="notices.length">
				<view class="notice-icon">
					<text class="notice-icon-text">公告</text>
				</view>
				<view class="notice-content">
					<swiper vertical autoplay circular interval="3000" class="notice-swiper">
						<swiper-item v-for="(notice, index) in notices" :key="index" class="notice-swiper-item"
							@click="clickNotice(notice.id)">
							<text class="notice-text">{{ notice.name }}</text>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 快捷入口 -->
			<view class="quick-entry">
			<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-padding-sm">
				<view class="justify-content-item tn-text-xl" @click="goPage('/pagesSubject/index?type=subject')">
					<text class="tn-text-bold tn-text-lg">{{ subjectName }}</text>
					<text class="tn-icon-sequence tn-margin-left-sm"></text>
				</view>
				<view class="justify-content-item tn-text-xl" @click="goPage('/pages/search/index')">
					<text class="tn-icon-search"></text>
				</view>
			</view>
				<view class="entry-grid">
					<view class="entry-item" v-for="(item, index) in quickEntries" :key="index"
						@click="goPage(item.path)">
						<view class="entry-icon" :class="item.iconClass">
							<image class="entry-icon-image" :src="item.icon" mode="aspectFit"></image>
						</view>
						<text class="entry-name">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<!-- 题库练习 + 线上考试 -->
			<view class="practice-section">
				<image class="practice-image" src="/static/img/tklx.png" mode="aspectFit"
					@click="goPage('/pages/train/index?mode=sequence')"></image>

				<image class="practice-image" src="/static/img/xsks.png" mode="aspectFit"
					@click="goPage('/pages/paper/index')"></image>
			</view>

			<!-- 热门资讯 -->
			<view class="hot-news" v-if="news.length">
				<view class="news-header">
					<text class="news-title">🔥 热门资讯</text>
					<text class="news-more" @click="goPage('/pages/index/news-list')">查看更多 ></text>
				</view>
				<view class="news-list">
					<view class="news-item" v-for="(item, index) in news.slice(0, 3)" :key="index"
						@click="goPage('/pages/index/news-detail?id=' + item.id)">
						<text class="news-item-title">{{ item.name }}</text>
						<text class="news-item-time">{{ item.create_time_text }}</text>
					</view>
				</view>
			</view>

			<!-- 底部进度条 -->
			<view class="progress-section" v-if="progressInfo.total != 0">
				<view class="progress-header">
					<text class="progress-title">刷题进度</text>
					<text class="progress-link" @click="continueStudy">继续刷题 ></text>
				</view>
				<view class="progress-content">
					<view class="progress-circle-container">
						<tui-circular-progress :percentage="progressInfo.percentage" :lineWidth="6"
							:strokeColor="'#5677fc'" :clockwise="true" :diam="90" :fontShow="false">
							<view class="progress-circle-inner">
								<text class="progress-count">{{ progressInfo.current }}/{{ progressInfo.total }}</text>
							</view>
						</tui-circular-progress>
					</view>
					<view class="progress-stats">
						<view class="stat-item">
							<text class="stat-label">总进度</text>
							<text class="stat-value">{{ (progressInfo.percentage * 100 ).toFixed(2)  }}%</text>
						</view>
						<!-- <view class="stat-item">
							<text class="stat-label">正确率</text>
							<text class="stat-value">{{ progressInfo.accuracy.toFixed(2) }}%</text>
						</view> -->
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'

	export default {
		name: "kz-page-index-list1",
		mixins: [template_page_mixin],
		props: {
			// 标题
			title: {
				type: String,
				default: "答题考试系统"
			},
			// banner图集合
			banners: {
				type: Array,
				default: () => []
			},
			// 公告集合
			notices: {
				type: Array,
				default: () => []
			},
			// 试卷集合
			papers: {
				type: Array,
				default: () => []
			},
			// 考场集合
			rooms: {
				type: Array,
				default: () => []
			},
			// 学习动态集合
			news: {
				type: Array,
				default: () => []
			},
			// 功能集合
			modules: {
				type: Array,
				default: () => []
			},
			// 科目ID
			subjectId: {
				type: Number,
				default: 0
			},
			// 科目名称
			subjectName: {
				type: String,
				default: "题库分类"
			},
			// 登录检查方法
			checkLoginAndProceed: {
				type: Function,
				default: null
			}
		},
		data() {
			return {
				searchKeyword: '',
				// 快捷入口配置
				quickEntries: [{
						name: '顺序刷题',
						icon: '/static/img/shuati.png',
						iconClass: 'icon-blue',
						path: '/pages/train/index?mode=sequence'
					},
					{
						name: '背题模式',
						icon: '/static/img/beiti.png',
						iconClass: 'icon-purple',
						path: '/pages/train/index?mode=recite'
					},
					{
						name: '我的错题',
						icon: '/static/img/cuoti.png',
						iconClass: 'icon-red',
						path: '/pages/wrong/index'
					},
					{
						name: '题目收藏',
						icon: '/static/img/timu.png',
						iconClass: 'icon-pink',
						path: '/pages/collect/index'
					},
					{
						name: '招聘岗位',
						icon: '/static/img/zhaoping.png',
						iconClass: 'icon-green',
						path: '/pages/hire/index'
					},
					{
						name: 'VIP会员',
						icon: '/static/img/vip.png',
						iconClass: 'icon-gold',
						path: '/pages/user/member-center'
					},
					{
						name: '考试记录',
						icon: '/static/img/kaoshi.png',
						iconClass: 'icon-cyan',
						path: '/pages/paper/log'
					},
					{
						name: '联系客服',
						icon: '/static/img/chat2.png',
						iconClass: 'icon-gray',
						path: '/pages/consult/index'
					}
				],
				// 进度信息
				progressInfo: {
					current: 0,
					total: 0,
					percentage: 0.0,
					accuracy: 0.0,
					cateId: 0,
					cateName: ''
				}
			}
		},
		mounted() {
			this.loadProgressInfo()
		},
		watch: {
			// 监听科目变化
			subjectId(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.loadProgressInfo()
				}
			}
		},
		onShow() {
			this.loadProgressInfo()
		},
		methods: {
			// 搜索
			search() {
				if (!this.searchKeyword.trim()) {
					uni.showToast({
						title: '请输入搜索关键字',
						icon: 'none'
					})
					return
				}
				this.goPage('/pages/search/index?keyword=' + encodeURIComponent(this.searchKeyword))
			},

			// 加载进度信息
			loadProgressInfo() {
				// 从后端获取实际的进度数据
				const params = {}
				if (this.subjectId && this.subjectId > 0) {
					params.cate_id = this.subjectId
				}

				this.http('Grade/getProgressCount', params, 'get').then(res => {
					if (res.code === 1 && res.data) {
						const {
							total,
							wrong,
							num,
							cate_id,
							cateName
						} = res.data

						// 计算百分比
						let percentage = total > 0 ? (num / total) * 1 : 0

						// 计算正确率
						const accuracy = num > 0 ? ((num - wrong) / num) * 100 : 0

						this.progressInfo = {
							current: num || 0,
							total: total || 0,
							percentage: percentage,
							accuracy: accuracy,
							cateId: cate_id || 0,
							cateName: cateName || ''
						}
					}
				}).catch(() => {
					// 如果接口调用失败，使用默认数据
					this.progressInfo = {
						current: 0,
						total: 0,
						percentage: 0.00,
						accuracy: 0.00,
						cateId: 0,
						cateName: ''
					}
				})
			},

			// 继续刷题
			continueStudy() {
				if (this.progressInfo.cateId && this.progressInfo.cateName) {
					// const url =
					// 	`/pages/train/index?mode=sequence&cateId=${this.progressInfo.cateId}&cateName=${encodeURIComponent(this.progressInfo.cateName)}&mode=memory`
					// uni.navigateTo({
					// 	url: url
					// })
					let path = '/pages/train/index?mode=sequence&' +
						`subjectId=${this.subjectId}&subjectName=${encodeURIComponent(this.subjectName)}`
						this.utils.goto(path)
				} else {
					// 如果没有进度数据，跳转到题库选择页面
					uni.navigateTo({
						url: '/pagesSubject/index?type=subject'
					})
				}
			},

			// 页面跳转
			goPage(path) {
				// 需要登录的页面路径列表
				const loginRequiredPaths = [
					'/pages/train/index',
					'/pages/paper/index', 
					'/pages/wrong/index',
					'/pages/collect/index',
					'/pages/user/member-center'
				];
				
				// 检查是否需要登录
				const needsLogin = loginRequiredPaths.some(requirePath => path.includes(requirePath));
				
				if (needsLogin && this.checkLoginAndProceed) {
					// 需要登录的页面，检查登录状态
					return this.checkLoginAndProceed(() => {
						this.performNavigation(path);
					});
				}
				
				// 不需要登录的页面，直接跳转
				this.performNavigation(path);
			},
			
			// 执行实际的页面跳转逻辑
			performNavigation(path) {
				// 特殊处理联系客服
				if (path === '/pages/consult/index') {
					uni.showModal({
						title: '提示',
						content: '客服系统建设中，请公众号咨询',
						showCancel: false,
						confirmText: '我知道了',
						confirmColor: '#5677fc'
					})
					return
				}

				// 特殊处理训练页面，自动传递当前选择的分类信息
				if (path.includes('/pages/train/index')) {
					// 检查是否已有参数
					if (this.subjectId && this.subjectId > 0) {
						const hasParams = path.includes('?')
						const separator = hasParams ? '&' : '?'
						path = path + separator +
							`subjectId=${this.subjectId}&subjectName=${encodeURIComponent(this.subjectName)}`
					} else {
						uni.showToast({
						title: '请选择分类',
						icon: 'none'
					})
						// this.utils.toast('请选择分类')
						return
					}
				}
				//
				if (path.includes('/pages/paper/index')) {
					// 检查是否已有参数
					if (this.subjectId) {
						const hasParams = path.includes('?')
						const separator = hasParams ? '&' : '?'
						path = path + separator + `subjectId=${this.subjectId}}`
					} else {
						uni.navigateTo({
							url: path,
							fail: () => {
								uni.switchTab({
									url: path
								})
							}
						})
					}
				}
				if (path.startsWith('/')) {
					uni.navigateTo({
						url: path,
						fail: () => {
							uni.switchTab({
								url: path
							})
						}
					})
				} else {
					this.utils.goto(path)
				}
			},

			// 点击公告，跳转公告详情
			clickNotice(id) {
				this.goPage('/pages/index/notice-detail?id=' + id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-index-list {
		background-color: #FFFFFF;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				color: #AAAAAA;
			}
		}
	}

	/*logo start */
	.logo-image {
		width: 65rpx;
		height: 65rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */

	/* 内容布局 start*/
	.course-shadow {
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.course-radius {
		border-radius: 15rpx;
	}

	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}

			&--image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				background-position: center;
				background-size: 100% 100%;

				&::after {
					width: 100%;
					height: 100%;

				}
			}
		}
	}

	/* 业务展示 start */
	.tn-info {

		&__container {
			margin-top: 10rpx;
			margin-bottom: 50rpx;
		}

		&__item {
			width: 48%;
			margin: 15rpx 0rpx;
			padding: 40rpx 30rpx;
			border-radius: 15rpx;


			position: relative;
			z-index: 1;

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
			}

			&__left {

				&--icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 30%;
					font-size: 50rpx;
					margin-right: 20rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;
						background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
					}
				}

				&__content {
					font-size: 30rpx;

					&--data {
						margin-top: 5rpx;
						font-weight: bold;
					}
				}
			}

			&__right {
				&--icon {
					position: absolute;
					right: 0upx;
					top: 50upx;
					font-size: 100upx;
					width: 108upx;
					height: 108upx;
					text-align: center;
					line-height: 60upx;
					opacity: 0.15;
				}
			}
		}
	}

	/* 业务展示 end */

	/* 文章内容 start*/
	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 20rpx;
			margin: 15rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #82B2FF;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 30rpx;
			padding-right: 5rpx;
		}
	}

	.image-music {
		padding: 100rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
	}

	/* 文章内容 end*/

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
		// background-color: #f2f5f9;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		width: 100%;
		height: 380rpx;
		overflow: hidden;
		white-space: nowrap;
		padding-top: 15rpx;
	}

	.kite-classify-cell {
		display: inline-block;
		width: 266rpx;
		height: 350rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
	}

	.nav-li {
		padding: 40rpx 30rpx;
		width: 100%;
		background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
		margin: 0 !important;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.nav-name::before {
		content: '';
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: '';
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-content {
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.nav-days {
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.search-container {
		margin: 20rpx 30rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.search-icon {
		font-size: 36rpx;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		padding: 0 10rpx;
	}

	.search-btn {
		font-size: 28rpx;
		color: #5677fc;
		padding: 0 20rpx;
	}

	.subject-selection {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 30rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.subject-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.subject-arrow {
		font-size: 36rpx;
		color: #888;
	}

	.banner-container {
		padding: 0 30rpx;
		margin-top: 20rpx;
	}

	/* 公告栏样式 */
	.notice-container {
		margin: 20rpx 30rpx;
		background: #f0f8ff;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
		height: 80rpx;
	}

	.notice-icon {
		background: #5677fc;
		color: white;
		padding: 0 30rpx;
		height: 100%;
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.notice-icon-text {
		font-size: 24rpx;
		font-weight: bold;
		white-space: nowrap;
	}

	.notice-content {
		flex: 1;
		height: 100%;
		padding-left: 30rpx;
	}

	.notice-swiper {
		height: 100%;
	}

	.notice-swiper-item {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.notice-text {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
	}

	.study-recommend {
		margin: 20rpx 30rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.recommend-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.recommend-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.recommend-content {
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.recommend-item {
		margin-bottom: 10rpx;
	}

	.recommend-text {
		font-size: 28rpx;
		color: #333;
	}

	.quick-entry {
		margin: 20rpx 30rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.entry-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
	}

	.entry-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 10rpx;
		transition: transform 0.3s ease;
	}

	.entry-item:active {
		transform: scale(0.95);
	}

	.entry-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		font-size: 40rpx;
	}

	.entry-icon-image {
		width: 80rpx;
		height: 80rpx;
		// border-radius: 30rpx;
	}

	.entry-name {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}

	.practice-section {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-top: 20rpx;
		gap: 20rpx;
	}

	.practice-image {
		flex: 1;
		height: 200rpx;
		border-radius: 15rpx;
		transition: transform 0.3s ease;
	}

	.practice-image:active {
		transform: scale(0.95);
	}

	/* 原来的practice-item样式已被删除，因为已改用图片显示 */

	.hot-news {
		margin: 20rpx 30rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.news-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.news-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.news-more {
		font-size: 28rpx;
		color: #5677fc;
	}

	.news-list {
		display: flex;
		flex-direction: column;
	}

	.news-item {
		padding: 15rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.news-item-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.news-item-time {
		font-size: 24rpx;
		color: #999;
	}

	.progress-section {
		margin: 20rpx 30rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.progress-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.progress-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.progress-link {
		font-size: 24rpx;
		color: #5677fc;
	}

	.progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 136rpx;
		padding: 0 40rpx;
	}



	.progress-circle-container {
		flex-shrink: 0;
		width: 180rpx;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.progress-circle-inner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.progress-count {
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
	}

	.progress-stats {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 25rpx;
	}

	.stat-item {
		display: flex;
		align-items: baseline;
		gap: 15rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
		font-weight: 400;
	}

	.stat-value {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
	}

	/* 图标颜色类 - 去掉背景色，只保留样式结构 */
	.icon-blue {
		background: none;
	}

	.icon-purple {
		background: none;
	}

	.icon-red {
		background: none;
	}

	.icon-pink {
		background: none;
	}

	.icon-green {
		background: none;
	}

	.icon-gold {
		background: none;
	}

	.icon-cyan {
		background: none;
	}

	.icon-gray {
		background: none;
	}

	.bg-index1 {
		background-color: #19cf8a;
		color: #fff;
	}

	.bg-index2 {
		background-color: #954ff6;
		color: #fff;
	}

	.bg-index3 {
		background-color: #5177ee;
		color: #fff;
	}

	.bg-index4 {
		background-color: #f49a02;
		color: #fff;
	}

	.bg-index5 {
		background-color: #ff4f94;
		color: #fff;
	}

	.bg-index6 {
		background-color: #7fd02b;
		color: #fff;
	}

	/* 页面阴影 start*/
	.wallpaper-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 用户头像 start */
	.logo-image {
		width: 100rpx;
		height: 100rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 1rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/*公告*/
	.tui-rolling-news {
		width: calc(100% - 40rpx);
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		background: #fff;
		border-radius: 10rpx;
		margin: 0 20rpx 30rpx;
	}

	.tui-swiper {
		font-size: 28rpx;
		height: 50rpx;
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center
	}

	.tui-news-item {
		line-height: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.question-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		// display: grid;
		// grid-template-columns: repeat(auto-fill, minmax(320rpx, 1fr));
		// /* 两列布局 */
		// gap: 20rpx;
		/* 卡片间距 */
	}

	.card {
		margin-top: 20rpx;
		width: 49%;
		background: #eeeeee;
		border-radius: 10rpx;

		.img {
			width: 100%;
			height: 200rpx;

			image {
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.content {
			padding: 0 10rpx 10rpx 10rpx;
			font-size: 30rpx;

			.content-f {
				margin-top: 20rpx;
				width: 100%;
				/* 设置容器宽度 */
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏溢出的文本 */
				text-overflow: ellipsis;

				/* 超出部分显示为省略号 */
				.content-f-img {
					font-size: 32rpx;
					color: #82B2FF;
					font-weight: 500;
				}
			}
		}
	}

	/*公告*/
</style>